<template>
   <!-- 加载图标样式27 -->
   <div class="loading"></div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading {
    animation: rotation 2s linear infinite;
    border: 3px solid #1678ff;
    display: inline-block;
    height: 64px;
    position: relative;
    width: 64px
}

.loading:after,.loading:before {
    animation: rotationBack 1.5s linear infinite;
    border: 3px solid #04be02;
    bottom: 0;
    content: "";
    height: 44px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transform-origin: center center;
    width: 44px
}

.loading:before {
    animation: rotation 1s linear infinite;
    border-color: #ffaa09;
    height: 30px;
    width: 30px
}

@keyframes rotation {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-1turn)
    }
}
</style>
